<%--
    Date: 2024-05-22
    用户修改用户名和密码。
    editUserInfo.jsp
    └── 提交成功 --> teacherHome.jsp 或 studentHome.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/editUserInfo.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/editUserInfo.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/updateTime.js"></script>
    <title>详情页面</title>
    <style>
        body {
            background: url('${pageContext.request.contextPath}/resources/img/bg-HYL.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            position: relative;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 1;
        }
        .container {
            position: relative;
            z-index: 2;
        }
        .top-bar {
            background-color: #112d4e;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            z-index: 3;
            top: 0;
        }
        .main-content {
            margin-top: 60px;
        }
        .modal {
            z-index: 1050;  
        }
        .modal-dialog {
            max-width: 600px;
        }
        .modal-body .form-group {
            text-align: left;
        }
        .main-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 60px;
            height: calc(100vh - 120px); 
        }
    </style>
</head>
<body>
<div class="overlay"></div>
<div class="top-bar">
    <span id="currentTime"></span>
</div>
<div class="container main-content">
    <h1 class="text-center mt-4 mb-4">用户信息修改</h1>
    <table class="table table-striped table-bordered table-custom">
        <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>${user.userId}</td>
            <td>${user.username}</td>
            <td>${user.role}</td>
            <td>
                <a href="#" class="btn btn-primary modify-button" data-userid="${user.userId}" data-username="${user.username}" data-role="${user.role}">修改用户信息</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="text-center mt-3">
        <a href="javascript:history.back()" class="btn btn-secondary mt-3">返回用户主页</a>
    </div>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改用户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="<c:url value="/update"/>" id="userForm">
                    <input type="hidden" id="id">
                    <div class="form-group">
                        <label for="userId">账号:</label>
                        <input type="text" class="form-control" id="userId" name="userId" readonly>
                    </div>
                    <div class="form-group">
                        <label for="username">姓名:</label>
                        <input type="text" class="form-control" id="username" name="username">
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" class="form-control" id="password" name="password">
                    </div>
                    <div class="form-group">
                        <label for="role">角色:</label>
                        <select class="form-control" id="role" name="role">
                            <option value="teacher">教师</option>
                            <option value="student">学生</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>